<template>
	<view>
		<view class="content publicBox" v-for="(item,index) in swiperList" :key="index">
			<view class="left" @click="seeImg(item)">
				<image class="img" mode="scaleToFill" :src="setUrl(item)"></image>
			</view>
			<view class="right">
				<view class="shop ellipsis">店铺：{{item.storeName}}</view>
				<view class="shop ellipsis">金额：{{item.consumptionAmount}}</view>
				<view class="local ellipsis">时间：{{item.consumptionDate}}</view>
				<view class="local ellipsis" v-if="item.reviewStatus=='1'">积分：+ <text style="color:#f50;font-weight: 400;">{{item.point}}</text></view>
				<view class="seeFail" v-if="item.reviewStatus=='2'" @click="seeFail(item)"><text class="textFont">查看</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			swiperList:{
				// type:Array,
				require:true,
			}
		},
		data() {
			return {
				
			};
		},
		computed:{
			setUrl(){
				return function(item){
					let array=JSON.parse(item.voucherPhoto)
					return array[0].url
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
.content{
	height:190rpx;
	display:flex;
	padding:20rpx 0;
	justify-content: space-around;
	.left{
		height:100%;
		width:170rpx;
		.img{
			height:100%;
			width:100%;
		}
	}
	.right{
		display:flex;
		flex-direction: column;
		justify-content: space-between;
		.seeFail{
			text-align: right;
			.textFont{
				padding:5px 8px;
				background:#2979ff;
				color:#fff;
				border-radius:5px;
			}
		}
	}
}
// 弹窗
.seeFailBox{
	background:#fff;
	padding:10px;
	width:550rpx;
	border-radius: 5px;
}
// 关闭弹窗按钮
.closeBox{
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.line{
		height:20px;
		width:2px;
		background:#fff;
	}
	.closeBut{
		margin-top:2px;
	}
}
</style>